Cache manifest in HTML5

Filename extension .appcache
Internet media type text/cache-manifest
Developed by World Wide Web Consortium
Standard(s) HTML5
Open format? Yes
Website www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

The cache manifest in HTML5 is a software storage feature which provides the ability to access a web application even without a network connection.

Contents

Background

Web applications consist of web pages that need to be downloaded from a network. For this to happen there must be a network connection. However there are many instances when users cannot connect to a network due to reasons beyond their control. HTML5 provides the ability to access the web application even without a network connection using the cache manifest.

Web applications consists of a list of web addresses. These can be HTML, CSS, JavaScript, images or any other source that is required for a web application to be rendered. These addresses or URLs can be copied onto a manifest file, which can be updated regularly by the author of the web application, indicating any new web addresses that are added or deleted. When connecting to a network for the first time a web browser will read the HTML5 manifest file, download the resources given and store them locally. Then, in the absence of a network connection, the web browser will shift to the local copies instead and render the web application offline.

Basics

In order for the offline applications to work, a cache manifest file must be created by the web developer. If the web application exceeds more than one page then each page must have a manifest attribute that points to the cache manifest. The cache manifest file is a text file located in another part of the server. It must be served with the following content type: [1]

text/cache-manifest

The following line must be added to the html element in order for the cache manifest file to work.[1]

<!DOCTYPE HTML>
<html manifest="/cache.appcache">
  <body></body>
</html>

Consider the HTML file given below. The <html> element indicates the test.appcache file. This manifest will contain the list of resources (i.e. test.js, test.css) needed for this web page to work offline.

<!—- test.html -->
<!DOCTYPE  HTML>
<html manifest="test.appcache">
<head>
  <title>Test</title>
  <script src="test.js"></script>
  <link rel="stylesheet" href="test.css">
</head>
<body>
  Testing the manifest file.
</body>
</html>

Syntax

Given below is a list of some rules and syntax required when writing the manifest file.[2]

CACHE MANIFEST 
# the above is a required line
# this is a comment 
# spaces are ignored
# blank lines are ignored

Given below is an example of a cache manifest file.

Example 1:

CACHE MANIFEST 
/test.css
/test.js
/test.png

This manifest file lists three resources: a CSS file, a JavaScript file and a PNG image. When the above file is loaded, the browser will download the test.css, test.js and test.png files from the root directory in the web server.[1] As a result, whenever your network is not connected, the resources will be available to you offline.

Cache manifests can also use absolute paths or even absolute URLs as shown below.[2][3][4]

Example 2:

CACHE MANIFEST
/main/features.js
/main/settings/index.css
http://files/images/scene.jpg
http://files/images/world.jpg

File headers

The cache manifest file consists of three section headers.[1]

  1. Explicit section with the header CACHE.
  2. Online whitelist section with the header NETWORK.
  3. Fallback section with the header FALLBACK.

note: Example 1 and Example 2 above, do not indicate any section header and are therefore considered an explicit section by default.

Online whitelist section with the header NETWORK

Example 3:

CACHE MANIFEST 
NETWORK: 
/checking.cgi
CACHE:
/test.css
/test.js
/test.png

This example consists of headers. The line, NETWORK: is the start of the “online whitelist” section. The resources listed under this section are never cached and are not available offline.[1]As a result an error will occur when an attempt is made offline to load the resource.

There is a shift to the explicit section by the header CACHE: and the resources (the CSS stylesheet , JavaScript and the image file) can be downloaded and used offline.

Fallback section with the header FALLBACK

The fallback section in a cache manifest file can be used to substitute online resources that cannot be cached or were not cached successfully.[1]

Example 4:

CACHE MANIFEST
FALLBACK:
/ /offline.html 
NETWORK:
…

In Example 4, the fallback section consist of a single line. i.e. / /offline.html. The single character (/) before ‘offline’ will match any URL pattern on your site.[1]If the browser does not find the page in the appcache, the application will display the page /offline.html.

Event flow

Events are under the ApplicationCache JavaScript object.

If the browser visits a web page, has NOT seen the web page before and as a result does not recognize the manifest file, the following events will ensue.[2]

If the browser has visited the web page before and recognizes the manifest file the following events will ensue.[2]

If an error occurs at any instance in the above events, the browser will trigger an error event and stop the process. Given below are a few errors that can occur when re-downloading resources.[3]

See also

References

External Links